<template>
    <el-row v-if="steps.list.length > 0" class="steps">
        <div v-if="allStepsList.length > 1" class="more" @click="showMore">
            <i class="el-icon-d-arrow-right" :class="{'arrow-top': moreStatus}" />
            <span>查看历史</span>
        </div>
        <el-steps :active="steps.flowSta" finish-status="success">
            <el-step title="提交表单">
                <div slot="description">
                    <p v-for="item in steps.list" :key="item.id" class="description">
                        {{ item.tabulationName }} {{ item.reportTime }}
                    </p>
                </div>
            </el-step>
            <el-step title="负责人审批">
                <div slot="description">
                    <div v-for="item in steps.list" :key="item.id" class="description">
                        <span v-if="item.principalStatus === 1" class="color-green">【同意】</span>
                        <span v-if="item.principalStatus === 2" class="color-red">【驳回】</span>
                        <span>{{ item.principalName }} {{ item.approveTime }}</span>
                        <p class="text">{{ item.principalContent }}</p>
                    </div>
                </div>
            </el-step>
            <el-step title="上级部门批复">
                <div slot="description">
                    <div v-for="item in steps.list" :key="item.id" class="description">
                        <span v-if="item.higherPrincipalStatus === 1" class="color-green">【同意】</span>
                        <span v-if="item.higherPrincipalStatus === 2" class="color-red">【驳回】</span>
                        <span>{{ item.higherPrincipalName }} {{ item.lastTime }}</span>
                        <p>{{ item.higherPrincipalContent }}</p>
                    </div>
                </div>
            </el-step>
        </el-steps>
    </el-row>
</template>

<script>
import { ApprovalFlowModel } from '@/models' 

export default {
    name: 'ApprovalSteps',
    props: {
        number: {
            type: String,
            default: ''
        },
    },
    data() {
        return {
            model: new ApprovalFlowModel(),
            steps: { list: [] },
            allStepsList: [],
            oneStepsList: [],
            moreStatus: false
        }
    },
    created() {
        this.getApprovalDetail()
    },
    methods: {
        showMore() {
            this.moreStatus = !this.moreStatus
            if (this.moreStatus) {
                this.steps.list = this.allStepsList
            } else {
                this.steps.list = [this.oneStepsList]
            }
        },
        getApprovalDetail() {
            this.model.getApprovalDetail({ number: this.number }).then(res => {
                if (!res) { return }
                this.allStepsList = res.list
                this.oneStepsList = res.list[0]
                const list = this.oneStepsList ? Object.assign(res, { list: [this.oneStepsList] }) : res
                this.steps = list
                console.log(this.oneStepsList)
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.steps {
    width: 100%;
    max-width: 900px;
    margin: 16px 0 32px;
    position: relative;
    .more {
        // font-weight: bold;
        font-size: 14px;
        padding: 0 24px;
        cursor: pointer;
        position: absolute;
        right: -130px;
        top: 0;
        .el-icon-d-arrow-right {
            margin-right: 8px;
            transition: 0.3s;
            transform: rotate(90deg)
        }
        .arrow-top {
            transform: rotate(-90deg)
        }
    }
    .text {
        word-break: break-all;
    }
    .description {
        margin-top: 8px;
    }
}
</style>
